<template>
<div class="feedback">

  <div class="top-contain">
    <h1 style="color: #2ebfe1;letter-spacing: 0.2em">反馈和建议</h1>
    <h3 style="color: #f4f4f5;letter-spacing: 0.15em">您的反馈和建议，是我们前进的动力</h3>
  </div>

  <div class="main-contain">
    <QuillEditor theme="snow" :options="editorOptions" toolbar="#toolbar-container" v-model:content = "feedBack.content"
                 content-type="text"
    >
      <template #toolbar>
        <div id="toolbar-container">
    <span class="ql-formats">
      <select class="ql-font"></select>
      <select class="ql-size"></select>
    </span>
          <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
          <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
          <span class="ql-formats">
      <button class="ql-script" value="sub"></button>
      <button class="ql-script" value="super"></button>
    </span>
          <span class="ql-formats">
      <button class="ql-header" value="1"></button>
      <button class="ql-header" value="2"></button>
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
    </span>
          <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-indent" value="-1"></button>
      <button class="ql-indent" value="+1"></button>
    </span>
          <span class="ql-formats">
      <button class="ql-direction" value="rtl"></button>
      <select class="ql-align"></select>
    </span>
          <span class="ql-formats">
      <button class="ql-link"></button>
      <button class="ql-image"></button>
      <button class="ql-video"></button>
      <button class="ql-formula"></button>
    </span>
          <span class="ql-formats">
      <button class="ql-clean"></button>
    </span>
        </div>
      </template>
    </QuillEditor>
    <el-button type="success" @click="send" class="hvr-grow-rotate">提交</el-button>
  </div>
</div>
</template>

<script>


import {ElMessage} from "element-plus";
import {sendFeedBack} from "../../api/api";

import state from "../../store/state";
import {mapState} from "vuex";

export default {

  name: "Index",
  data(){
    return{
      editorOptions:{
        placeholder: '请提供您宝贵的建议和反馈',
        readOnly: false,
        theme: 'snow',
      },

      feedBack:{
        id: '',
        uid: '',
        content: '',
        feed_time: ''
      }
    }
  },
  computed:{
    ...mapState({
      me: state => state.user.me
    })
  },
  methods:{
    //此处应设置消息队列，防止通过反馈来攻击服务器
    send(){

      const tokenValue = localStorage.getItem("satoken")
      if(!tokenValue){
        ElMessage.warning({
          type: 'warning',
          message: '请先登录！'
        })
        return -1
      }

      this.feedBack.uid=this.me.id
      this.feedBack.feed_time = this.$moment()

      sendFeedBack({
        ...this.feedBack
      },{
        "satoken": tokenValue
      })
      .then(res=>{
        console.log(res)
        if (res.code === 200){
          ElMessage.success({
            message: res.msg,
            type: 'success',
          })
          this.feedBack.content = ''
        }
        else{
          ElMessage.warning({
            message: res.msg,
            type: 'warning'
          })
        }
      })
      .catch(err=>{
        console.log(err)
        ElMessage.error({
          type: 'error',
          message: err
        })
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
}
</script>

<style scoped>
.main-contain{
  background: #f4f4f5;
  height: 400px;
}
.feedback{
  position: relative;
  width: 100%;
  height: 600px;
}
</style>